<!doctype html>

<html lang="zh-cn">

  <head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>导航栏</title>
    <base target="_blank">
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        width: 800px;
        margin: 20px auto;
      }
      li {
        list-style: none;
        display: inline-block;
        width: 100px;
        height: 50px;
        margin:0 4px;
        line-height: 50px;
        text-align: center;
        color: white;
        background-image: url(../picture/huang.png);
      }
      a {
        text-decoration: none;
      }
        li:hover {
          background-image: url(../picture/lan.png);
        }
    </style>
    
  </head>

  <body>
    <ul>
      <li><a href="https://baike.baidu.com/item/%E7%B4%AB%E5%8F%B6%E6%9D%8E/2347234?fr=aladdin">紫叶李</a></li>
      <li><a href="https://baike.baidu.com/item/%E6%A0%BE%E6%A0%91/30619?fr=aladdin">栾树</a></li>
      <li><a href="https://baike.baidu.com/item/%E9%A6%99%E6%A8%9F/2834433?fr=aladdin">香樟</a></li>
      <li><a href="https://baike.baidu.com/item/%E9%93%B6%E6%9D%8F/229130?fr=aladdin">银杏</a></li>
      <li><a href="https://baike.baidu.com/item/%E5%90%88%E6%AC%A2/22164?fr=aladdin">合欢</a></li>
      <li><a href="https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E6%99%9A%E6%A8%B1/35490?fr=aladdin">晚樱</a></li>
    </ul>
  </body>
</html>